<template>
<!--  <div class="dashboard-editor-container">-->
    <!--    <div class=" clearfix">-->
    <!--      <pan-thumb :image="avatar" style="float: left">-->
    <!--        Your roles:-->
    <!--        <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>-->
    <!--      </pan-thumb>-->
    <!--      <github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />-->
    <!--      <div class="info-container">-->
    <!--        <span class="display_name">{{ name }}</span>-->
    <!--        <span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div>-->
    <!--      <img src="../../../assets/img/home.jpg" class="emptyGif">-->
    <!--    </div>-->
    <div class="dashboard-container">
      <div class="dashboard-text">两癌筛查管理系统</div>
    </div>
<!--  </div>-->
</template>

<script>
import {mapGetters} from 'vuex'
import PanThumb from '@/components/PanThumb'
import GithubCorner from '@/components/GithubCorner'

export default {
  name: 'DashboardEditor',
  components: {PanThumb, GithubCorner},
  data() {
    return {
      emptyGif: '../../assets/img/home.jpg'
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  }
}
</script>

<style lang="scss" scoped>

.dashboard {
  &-container {
    //margin: 30px;
    height: 100%;
    width: 100%;
    position: fixed;
    background-image: url('../../../assets/img/home.jpg');
    background-size: cover;
  }

  &-text {
    margin-top: 100px;
    font-size: 89px;
    line-height: 89px;
    align-items: center;
    text-align: center;
    color: #fff;
  }
}

.emptyGif {
  display: block;
  width: 45%;
  margin: 0 auto;
}

.dashboard-editor-container {
  background-color: #e3e3e3;
  min-height: 100vh;
  padding: 50px 60px 0px;

  .pan-info-roles {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: block;
  }

  .info-container {
    position: relative;
    margin-left: 190px;
    height: 150px;
    line-height: 200px;

    .display_name {
      font-size: 48px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 25px;
    }
  }
}
</style>
